<template>
		<div class="item">
		    <img src="http://img.chufaba.me/routes/2019/11/25/ze2ceznedxknenrf.jpg!1600">
		    <div class="wrap">
				<div class="inner">
					<p>{{msg}}</p>
					<h2>{{msg1}}</h2>
					<p>{{msg2}}</p>
		        </div>
		    </div>
		</div>
</template>

<script>
	export default {
	  name: 'Scenery',
	 data(){
		return{
			msg:"去处",
			msg1:"元旦拼个假，玩转国内外",
			msg2:"元旦出游，国内外旅游目的地推荐",
			msg3:"http://img.chufaba.me/routes/2019/11/25/ze2ceznedxknenrf.jpg!1600"
		}
	 }
	}
</script>

<style scoped="scoped">
	.item{
		display: inline-block;
		margin-right: 10px;
		width: 380px;
		height: 215px;
		border-radius: 5px;
		overflow: hidden;
		position: relative;
	}
	.item{
		z-index: -5;
	}
	.item img{
		width: 380px;
		height: 215px;
	}
	.wrap{
		position: absolute;
		top: 0;
		left: 0;
		width: 380px;
		height: 215px;
		background-color: rgba(0,0,0,.3);
	}
	.wrap .inner{
		position: absolute;
		top: 0;
		left: 0;
		width: 380px;
		height: 215px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* text-align: center; */
		color: #ffffff;
	}
	.wrap p{
		font-size: 12px;
	}
	.wrap h2{
		font-size: 24px;
		margin: 5px 0;
	}
</style>
